<template>
    <div class="h-collapse-item" :class="{
        'is-disabled': disabled
    }" :id="`item-${name}`">
        <div class="h-collapse-item__header" :class="{
            'is-disabled': disabled,
            'is-active': isActive
        }" @click="hanldClick">
            <slot name="title"> {{ title }}</slot>
            <h-icon icon="angle-right" class="header-angle"></h-icon>
        </div>
        <Transition name="slide" v-on="transitionEvents">
            <div class="h-collapse-item__wrapper" v-show="isActive">
                <div class="h-collapse-item__content">
                    <slot></slot>
                </div>
            </div>
        </Transition>
    </div>
</template>

<script setup lang="ts">
import { inject, computed } from 'vue'
import type { CollapseItemProps, CollapseContext } from './types';
import { collapseKey } from './types'
import HIcon from '../Icon/HIcon.vue';

const props = defineProps<CollapseItemProps>()
const collapse = inject<CollapseContext>(collapseKey)
// 判断当前活动面板
const isActive = computed(() => collapse?.collapseArr.value.includes(props.name))
// 处理点击改变当前活动面板
const hanldClick = () => {
    if (props.disabled) { return }
    collapse?.handleCollapseArr(props.name)
}

// 处理动画
const transitionEvents: Record<string, (el: HTMLElement) => void> = {
    beforeEnter(el) {
        el.style.height = '0px'
        el.style.overflow = 'hidden'
    },
    enter(el) {
        el.style.height = `${el.scrollHeight}px`
    },
    afterEnter(el) {
        el.style.height = ''
        el.style.overflow = ''
    },
    beforeLeave(el) {
        el.style.height = `${el.scrollHeight}px`
        el.style.overflow = 'hidden'
    },
    leave(el) {
        el.style.height = '0px'
    },
    afterLeave(el) {
        el.style.height = ''
        el.style.overflow = ''
    }
}

</script>

<style scoped></style>